<template>
	<view class="recharge-container">
		<!-- 页面标题 -->
		<!-- <view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view> -->
		<view style="background-color: var(--tn-color-primary);">
			<tn-navbar  home-icon=""  bg-color="tn-type-primary_bg" text-color="tn-white" > 余额充值 </tn-navbar>
		</view>
		<!-- <tn-navbar height="45px" home-icon="" :bottom-shadow = "false"  :before-back="beforeBack">定价管理 </tn-navbar> -->
		
		<!-- 代理商选择 -->
		<view class="owner-section tn-p-sm tn-mb-sm">
			<picker @change="handleOwnerChange" :value="selectedIndex" :range="orgList" range-key="orgname">
				<view class="owner-picker tn-p-sm ">
					<text class="owner-name">{{ selectedIndex !== -1 ? orgList[selectedIndex]?.orgname : '请选择下级' }}</text>
					<text class="tn-icon-down"></text>
				</view>
			</picker>
		</view>
		
		
		
		
		<!-- 余额信息 -->
		<view class="balance-section" v-if="selectedIndex > -1">
			<view class="balance-card">
				<view class="balance-header">
					<text class="balance-label">当前余额</text>
					<text class="balance-time">{{currentTime}}</text>
				</view>
				<view class="balance-amount">
					<text class="currency">¥</text>
					<text class="amount">{{currentBalance}}</text>
				</view>
			</view>
		</view>
		
		<!-- 充值表单 -->
		<view class="recharge-form" v-if="selectedIndex > -1">
			<view class="form-item">
				<text class="form-label">充值金额</text>
				<view class="input-wrapper">
					<text class="currency">¥</text>
					<input 
						type="digit" 
						v-model="rechargeAmount"
						class="amount-input"
						placeholder="请输入充值金额"
						@input="handleAmountInput"
					/>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">充值备注</text>
				<view class="input-wrapper">
					<input 
						type="digit" 
						:value="remark"
						class="amount-input"
						placeholder="请输入充值备注"
					/>
				</view>
			</view>
			
			<button 
				class="recharge-btn tn-btn tn-btn--primary"
				:disabled="!isValidAmount"
				@click="handleRecharge"
			>
				确认充值
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed,reactive,onMounted } from 'vue'
import { formatDate } from '@/utils/date.js'
import { postCall  } from '@/api/index.js'
import { createParams } from '@/utils/utils.js'
import Big from 'big.js'
import { toastMessage } from '@/utils/toast.js'
const procName = "PROC_APP_DO_ORG";


const beforeBack = () => {
	  return new Promise((resolve) => {
	    setTimeout(() => {
	      uni.redirectTo({
	      	url: '/pages/index/index'
	      });
		  return true;
	    }, 500)
	  })
	}

onMounted(()=>{
	getNextOrgList();
})

// 货主列表
const orgList = ref([])
const selectedIndex = ref(-1)
const remark = ref('');

const getNextOrgList = async () =>{
	let params = {};
	params["P_PROC_NAME"] = procName;
	params["P_ACTION"] = "GETNEXTORG";
	await postCall(params).then(res=>{
		if(res){
			if(res.code===200){
				orgList.value = res.data.DATASET;
				console.log(orgList.value);
			}
		}
	})
}

// 处理货主选择
const handleOwnerChange = (e) => {

	selectedIndex.value = e.detail.value;
	console.log(selectedIndex.value);
	getOrgBalance();
	
}

const getOrgBalance = async () =>{
	let params = {};
	params["P_PROC_NAME"] = procName;
	params["P_ACTION"] = "GETNEXTORGBALANCE";
	params["P_NEXTORGID"] = orgList.value[selectedIndex.value]?.orgid ?? '';
	await postCall(params).then(res=>{
		if(res){
			if(res.code===200){
				currentBalance.value = res.data.DATASET[0]?.ye ?? 0;
			}
		}
	})
}

// 代理商列表
const agentList = ref([
	{ id: '1', name: '货主A' },
	{ id: '2', name: '货主B' },
	{ id: '3', name: '货主C' }
])
const agentIndex = ref(-1)

// 当前余额
const currentBalance = ref('0.00')

// 充值金额
const rechargeAmount = ref('')

// 当前时间
const currentTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'))

// 更新当前时间
setInterval(() => {
	currentTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
}, 1000)

// 验证充值金额
const isValidAmount = computed(() => {
	const amount = parseFloat(rechargeAmount.value)
	return amount > 0 && amount <= 100000000 // 设置最大充值限额
})

// 处理代理商选择
const handleAgentChange = (e) => {
	agentIndex.value = e.detail.value
	// 确保有选中的代理商
	if (agentIndex.value > -1 && agentList.value[agentIndex.value]) {
		// 加载选中代理商的余额信息
		loadAgentBalance(agentList.value[agentIndex.value].id)
	} else {
		// 重置余额显示
		currentBalance.value = '0.00'
	}
}

// 加载代理商余额
const loadAgentBalance = (agentId) => {
	// 这里应该调用实际的API获取余额
	// 目前使用模拟数据
	currentBalance.value = '1000.00'
}

// 处理金额输入
const handleAmountInput = (e) => {
	const value = e.detail.value
	// 限制只能输入数字和小数点
	if (!/^\d*\.?\d{0,2}$/.test(value)) {
		rechargeAmount.value = value.replace(/[^\d.]/g, '')
	}
}

// 处理充值
const handleRecharge = async () => {
	if (!isValidAmount.value) return
	
	try {
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "RECHARGE";
		params["P_NEXTORGID"] = orgList.value[selectedIndex.value]?.orgid ?? '';
		params["P_TAXAMOUNT"] = rechargeAmount.value;
		params["P_REMARK"] = remark.value;
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					toastMessage("充值成功");
					// 清空充值金额
					rechargeAmount.value = ''
					getOrgBalance();
				}
			}
		})
		
	} catch (error) {
		toastMessage("充值失败");
	}
}
</script>

<style lang="scss">
.recharge-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 40rpx;
}

.page-header {
	padding: 40rpx 30rpx;
	background: linear-gradient(to right, #4a90e2, #5cb3ff);
	
	.title {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
	}
}

.agent-section {
	padding: 30rpx;
	
	.section-title {
		margin-bottom: 20rpx;
		
		.title-text {
			font-size: 28rpx;
			color: #666;
			font-weight: 500;
		}
	}
	
	.picker-wrapper {
		background-color: #fff;
		border-radius: 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		
		.picker-content {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.picker-left {
				display: flex;
				align-items: center;
				
				.tn-icon-user {
					font-size: 36rpx;
					color: #4a90e2;
					margin-right: 16rpx;
				}
				
				.picker-text {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
			}
			
			.tn-icon-right {
				font-size: 32rpx;
				color: #999;
			}
		}
	}
}

.balance-section {
	padding: 0 30rpx;
	
	.balance-card {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.balance-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.balance-label {
				font-size: 28rpx;
				color: #666;
			}
			
			.balance-time {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.balance-amount {
			display: flex;
			align-items: baseline;
			
			.currency {
				font-size: 32rpx;
				color: #ff6b6b;
				margin-right: 8rpx;
			}
			
			.amount {
				font-size: 48rpx;
				color: #ff6b6b;
				font-weight: bold;
			}
		}
	}
}
.owner-section {
	background-color: #fff;
	.owner-picker {
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.owner-name {
			font-size: 32rpx;
			color: #333;
		}
		
		.tn-icon-down {
			color: #999;
			font-size: 24rpx;
		}
	}
}

.recharge-form {
	padding: 30rpx;
	
	.form-item {
		background-color: #fff;
		padding: 24rpx 30rpx;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.form-label {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 16rpx;
			display: block;
		}
		
		.input-wrapper {
			display: flex;
			align-items: center;
			
			.currency {
				font-size: 32rpx;
				color: #333;
				margin-right: 8rpx;
			}
			
			.amount-input {
				flex: 1;
				font-size: 36rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}
	
	.recharge-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		border-radius: 12rpx;
		background: linear-gradient(to right, #4a90e2, #5cb3ff);
		color: #fff;
		font-weight: bold;
		box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
		
		&:disabled {
			opacity: 0.6;
		}
	}
}
</style> 